<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        /**
         * 这里我们将重复的代码，抽出来,编写一个方法 get *
         * @param url ajax 请求的资源
         * @param data ajax 请求携带的数据
         * @returns {Promise<unknown>} */
        let get=function(url,data){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:url,
                    data:data,
                    success(resultData){
                        resolve(resultData);
                    },
                    error(err){
                        reject(err);
                    }
                })
            })
        }

        //需求: 完成
        //1. 先获取 monster.json
        //2. 获取 monster_detail_1.json
        //2. 获取 monster_gf_2.json
        get("data/monster.json").then((resultData)=>{
            console.log("第 1 次 ajax 请求返回数据=", resultData);
            return get(`data/monster_detail_${resultData.id}.json`);
        }).then((resultData)=>{
            console.log("第 2 次 ajax 请求返回数据=", resultData);
            return get(`data/monster_gf_${resultData.gfid}.json`);
        }).then((resultData)=>{
            console.log("第 3 次 ajax 请求返回数据=", resultData)
        }).catch((err)=>{
            console.log("promise 请求异常=", err);
        })
    </script>
</head>
<body>

</body>
</html>